<!DOCTYPE html>
<html>
    <head>
        <script src="index.js"></script>
    </head>
    <style>
        sp-textarea,
        textarea {
            width: 100%;
            height: 100px;
        }

        #taPromptShortcut {
            height: 300px;
            margin: 3px auto;
        }

        #taPrompt {
            box-sizing: border-box;
            background: rgb(37, 37, 37);
        }

        .container {
            width: 100%;
            padding-left: 3%;
            padding-right: 3%;
        }

        sp-progressbar {
            margin-bottom: 3px;
            margin-top: 3px;
        }

        .prompt-container {
            width: 100%;
            padding-left: 5%;
            padding-right: 5%;
        }

        #collapsible {
            background-color: #777;
            color: white;
            cursor: pointer;
            padding: 5px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
        }

        #collapsible:hover {
            background-color: #333;
        }

        .content {
            padding: 0 18px;
            display: none;
            overflow: hidden;
        }

        .grid-container {
            display: inline-flex;
            grid-template-columns: auto auto auto;
        }

        .column-item-image {
            width: 100px;
            height: 100px;
            margin: 0;
        }

        .viewer-image,
        .history-image,
        .image-search {
            width: 100px;
            height: 100px;
            margin: 0;
            position: relative;
            max-height: 100%;
            max-width: 100%;
        }

        .viewer-image-button {
            display: none;
            /* background-color:  #495b79; */
            color: white;
            border: none;
            cursor: pointer;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            /* height: 20px; */
            margin: 0;
            max-height: 100%;
            max-width: 100%;
        }

        .viewer-image-container {
            position: relative;
            width: 100px;
            height: 100px;
            margin: 0;
        }

        .viewer-image-container:hover .viewer-image-button {
            display: flex;
        }

        .viewer-image-container:hover .thumbnail-image-button {
            display: flex;
        }

        .viewer-container {
            display: flex;
            flex-wrap: wrap;
        }

        .thumbnail-image-button {
            display: none;
            /* background-color:  #495b79; */
            color: white;
            border: none;
            cursor: pointer;
            position: absolute;
            /* bottom: 0;
            left: 0; */
            width: 100%;
            /* height: 20px; */
            margin: 0;
            max-height: 100%;
            max-width: 100%;
        }

        .thumbnail-image-button:nth-child(2) {
            border-color: green;
            bottom: 0;
            left: 0;
        }
        .thumbnail-image-button:nth-child(3) {
            border-color: pink;
            bottom: 0;
            right: 0;
        }
        .thumbnail-image-button:nth-child(4) {
            border-color: yellow;
            top: 0;
            left: 0;
        }
        .thumbnail-image-button:nth-child(5) {
            border-color: red;
            top: 0;
            right: 0;
        }

        .column-item {
            margin: 0;
        }

        .button-style {
            background-color: #777;
            color: white;
            cursor: pointer;
            width: 100px;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
            margin: 0;
        }

        .disableBtn {
            opacity: 0.65;
            cursor: not-allowed !important;
        }
        .btnSquare,
        #btnRefreshModels {
            background-color: #777;
            color: white;
            cursor: pointer;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
            margin: 0;
        }
        #btnRefreshModels:hover {
            background-color: #333;
        }
        #btnRefreshModels:focus {
            background-color: #f0f0f0;
        }
        .btnSquare:not(.btnGenerateClass):hover {
            background-color: #333;
        }
        .btnSquare:focus {
            background-color: #f0f0f0;
        }
        #btnUpdate {
            background-color: #3555ac;
            color: white;
            cursor: pointer;

            border: none;

            text-align: left;
            outline: none;
            font-size: 15px;
            margin-left: 3px;
        }
        #btnUpdate:hover {
            background-color: #3f68d6;
        }
        .button-style2 {
            background-color: #777;
            color: white;
            cursor: pointer;

            border: 1px;

            text-align: left;
            outline-style: solid;
            outline: solid;
            font-size: 15px;
            margin: 10px;
        }

        .wrapper {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /* overflow: auto; */
            overflow-x: hidden;
            overflow-y: scroll;
        }

        #progressContainer {
            display: flex;
            justify-content: space-between;
        }

        #lVersionNumber {
            display: flex;
            margin-left: auto;
        }

        .flexContainer {
            flex: 0 0 auto;
            display: flex;
            flex-direction: row;
        }

        #historySeedLabelContainer {
            display: flex;
            margin-left: auto;
        }

        #menu-bar-container {
            width: 100%;
            display: flex;
            /* justify-content: space-between; */
            margin: 3px auto;
        }

        #sdBtnContainer {
            display: flex;
            flex: 0 0 auto;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .labelNumber {
            color: aliceblue;
        }

        #lNameInpaintPdding {
            margin-right: 10px;
        }

        /* tabs */
        .sp-tabs {
            flex: 0 0 auto;
            display: flex;
            flex-direction: row;
            border-bottom: 2px solid #3e3e3e;
        }

        .sp-tab {
            margin-right: 12px;
        }

        .sp-tab sp-label {
            color: rgba(255, 255, 255, 0.75);
        }

        .sp-tab:hover sp-label {
            color: white;
        }

        .sp-tab.selected {
            border-bottom: 2px solid white;
            margin-bottom: -2px;
        }

        .sp-tab.selected sp-label {
            color: white;
        }

        @media (prefers-color-scheme: light), (prefers-color-scheme: lightest) {
            .sp-tabs {
                border-bottom: 2px solid #b8b8b8;
            }

            .sp-tab sp-label {
                color: rgba(0, 0, 0, 0.66);
            }

            .sp-tab:hover sp-label {
                color: black;
            }

            .sp-tab.selected {
                border-bottom: 2px solid black;
            }

            .sp-tab.selected sp-label {
                color: black;
            }
        }

        .sp-tab-page {
            visibility: hidden;
            /* display: none; */
            flex: 1 1 auto;
            /* overflow: scroll; */
            overflow-y: scroll;
            padding: 12px 0;
            flex-direction: column;
        }

        .sp-tab-page.visible-hack {
            display: flex;
            /* overflow: hidden; */
            /* overflow-y: scroll; */
            /* position: fixed; */
            top: 25px;
            visibility: visible;
            max-width: 100%;
            width: 100%;
            /* margin: 0px; */
            position: absolute;
            width: 100%;
            left: 0;
            padding-left: 10px;
            padding-right: 10px;
        }

        .sp-tab-page.visible {
            display: flex;
        }

        .sp-tab-page > * {
            flex: 0 0 auto;
        }

        .viewerImgSelected {
            border: 3px solid #6db579;
        }

        .viewerImgActive {
            border: 3px solid #fb9700;
        }

        .generate-more {
            background-color: #6db579;
        }

        .generate {
            background-color: #ff595e;
        }

        .connected {
            color: #6db579;
        }

        .disconnected {
            color: #ff595e;
        }

        #slWidth {
            width: 50%;
            margin-right: 10px;
        }

        #slHeight {
            width: 50%;
            margin-left: 10px;
        }

        #hrWidth {
            width: 33%;
            margin-right: 10px;
        }

        #hrHeight {
            width: 33%;
            margin-left: 10px;
        }

        #hrDenoisingStrength {
            width: 33%;
            margin-left: 10px;
        }

        #tiNumberOfSteps {
            width: 50%;
        }

        #tiNumberOfSteps {
            width: auto;
        }

        .rbMaskContent {
            font-size: 1.1em;
        }

        #rbSelectionModeLabel,
        .rbSelectionMode {
            font-size: 1em;
            margin-right: 12px;
        }
        #BackendTypeLabel,
        .rbBackendType {
            font-size: 1.05em;
            margin-right: 12px;
        }
        .checkbox {
            font-size: 1em;
            margin-right: 10px;
        }

        #slCfgScale {
            width: 50%;
            margin-right: 10px;
        }

        #slDenoisingStrength {
            width: 50%;
            margin-left: 10px;
        }

        #slInpaintingMaskWeight {
            width: 100%;
            margin-left: 10px;
        }

        .disabled-btn {
            opacity: 0.65;
            cursor: not-allowed;
        }

        .buttonImage {
            padding: 8px 8px 8px 32px;
            font-family: Arial, Verdana;
            background: #f0f0f0
                url();
            background-position: 8px 8px;
            background-repeat: no-repeat;
        }

        .layerToSelection {
            font-family: Arial, Verdana;
            background-image: url(./icon/layer_to_selection.svg);
            background-color: #777;
            background-size: 30px;
            width: 30px;
            height: 30px;
            background-repeat: no-repeat;
        }
        .linkSlider {
            margin-top: 25px;
            font-family: Arial, Verdana;
            /* background-image: url(./icon/chain.svg); */
            /* background-color: #777; */
            background-color: transparent;

            background-size: 20px;
            width: 20px;
            height: 20px;
            background-repeat: no-repeat;
        }
        .whiteChain {
            background-image: url(./icon/chain_white.svg);
        }
        .blackChain {
            background-image: url(./icon/chain_black.svg);
        }
        .acceptAllImgBtn {
            font-family: Arial, Verdana;
            background-image: url(./icon/accept_all.svg);
            background-color: #777;
            background-size: 30px;
            width: 30px;
            height: 30px;
            background-repeat: no-repeat;
        }

        .acceptSelectedImgBtn {
            font-family: Arial, Verdana;
            background-image: url(./icon/accept_selected.svg);
            background-color: #777;
            background-size: 30px;
            width: 30px;
            height: 30px;
            background-repeat: no-repeat;
        }

        .discardAllImgBtn {
            font-family: Arial, Verdana;
            background-image: url(./icon/discard_all.svg);
            background-color: #777;
            background-size: 30px;
            width: 30px;
            height: 30px;
            background-repeat: no-repeat;
        }

        .discardSelectedImgBtn {
            font-family: Arial, Verdana;
            background-image: url(./icon/discard_selected.svg);
            background-color: #777;
            background-size: 30px;
            width: 30px;
            height: 30px;
            background-repeat: no-repeat;
        }

        .resetButton {
            font-family: Arial, Verdana;
            background-image: url(./icon/reset_settings2.png);
            background-color: #777;
            background-size: 30px;
            width: 30px;
            height: 30px;
            background-repeat: no-repeat;
        }

        .snapshotButton {
            font-family: Arial, Verdana;
            background-image: url(./icon/camera_icon.svg);
            background-color: #777;
            background-size: 30px;
            width: 30px;
            height: 30px;
            background-repeat: no-repeat;
        }
        .divBtn {
            display: block;
            padding: 10px;
            border: 1px solid black;
            background: red;
            font-size: 16px;
            color: black;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            text-align: center;
            padding: 15px;
            margin: 5px;
            cursor: pointer;
        }
        .line-divider {
            background-color: #3e3e3e;
        }
        .res-increase {
            color: #6db579;
        }
        .res-decrease {
            color: #ff595e;
        }
        .controlNetImaageContainer {
            margin-right: 3px;
        }
        #divInitImageViewerContainer {
            display: flex;
        }
        .rbSubTab {
            font-size: 0.9em;
        }
        .rbSubTab:last-child {
            margin-right: 0;
        }
    </style>

    <body>
        <!-- <sp-textarea id="tool_tip" open placement="top">use this when you want to fill empty areas of the canvas</sp-textarea> -->
        <!-- <sp-tooltip id="tool_tip" open placement="top">use this when you want to fill empty areas of the canvas</sp-tooltip> -->

        <div class="container wrapper">
            <div class="sp-tabs">
                <div
                    class="sp-tab selected"
                    id="sp-stable-diffusion-ui-tab"
                    title="Stable Diffusion UI"
                >
                    <sp-label>Stable Diffusion</sp-label>
                </div>
                <div class="sp-tab" id="sp-viewer-tab">
                    <sp-label>Viewer</sp-label>
                </div>
                <div class="sp-tab" id="sp-control_net-tab">
                    <sp-label>ControlNet</sp-label>
                </div>
                <div class="sp-tab" id="sp-history-tab" style="display: none">
                    <sp-label>History</sp-label>
                </div>
                <div
                    class="sp-tab"
                    id="sp-image_search-tab"
                    style="display: none"
                >
                    <sp-label>Image Search</sp-label>
                </div>

                <div
                    class="sp-tab"
                    id="sp-prompts-library-tab"
                    style="display: none"
                >
                    <sp-label>Prompts library</sp-label>
                </div>
                <div class="sp-tab" id="sp-horde-tab">
                    <sp-label>Horde</sp-label>
                </div>
                <div class="sp-tab" id="sp-extras-tab">
                    <sp-label>Extras</sp-label>
                </div>
                <div class="sp-tab" id="sp-presets-tab" style="display: none">
                    <sp-label>Presets</sp-label>
                </div>
                <div class="sp-tab" id="sp-settings-tab">
                    <sp-label>Settings</sp-label>
                </div>
                <div>
                    <span
                        class="disconnected"
                        id="automaticStatus"
                        title="'A' for Automatic1111 server (webui-user.bat), Green is connected. Red Means there is a problem with your Automatic1111. Run 'webui-user.bat' and hit 'Refresh' button "
                        >A</span
                    >
                    <span
                        class="disconnected"
                        id="proxyServerStatus"
                        title="'P' for proxy server (start_server.bat), Green is connected. Red means you need to run 'start_server.bat' or hit Refresh button"
                        >P</span
                    >
                </div>
                <sp-label slot="label" id="lVersionNumber">v0.0.0</sp-label>
            </div>

            <div class="sp-tab-page" id="sp-viewer-tab-page">
                <div class="subTabOptionsContainer">
                    <sp-radio-group
                        id="rgSubTab"
                        class="rbMaskContent"
                        data-container-class="subTabOptionsContainer"
                    >
                        <sp-radio
                            title=""
                            class="rbSubTab"
                            id="rbHistoryTab"
                            checked
                            value="viewer"
                            data-tab-name="sp-viewer-tab"
                            >Viewer</sp-radio
                        >
                        <sp-radio
                            title=""
                            class="rbSubTab"
                            id="rbHistoryTab"
                            value="history"
                            data-tab-name="sp-history-tab"
                            >History</sp-radio
                        >
                        <sp-radio
                            title=""
                            class="rbSubTab"
                            id="rbImageSearch"
                            data-tab-name="sp-image_search-tab"
                            value="image_search"
                            >Image Search</sp-radio
                        >
                        <sp-radio
                            title=""
                            class="rbSubTab"
                            id="rbPromptsLibrary"
                            data-tab-name="sp-prompts-library-tab"
                            value="prompts-library"
                            >Prompts Library</sp-radio
                        >
                    </sp-radio-group>
                </div>
                <div id="viewerSubTab">
                    <div class="flexContainer">
                        <sp-label slot="label"
                            >View your generated images on the canvas</sp-label
                        >
                    </div>
                    <div></div>
                    <div>
                        <button class="btnSquare" id="btnSetMaskViewer">
                            Set Mask
                        </button>
                        <button class="btnSquare" id="btnSetInitImageViewer">
                            Set Init Image
                        </button>
                        <button
                            class="btnSquare btnGenerateClass"
                            id="btnGenerate"
                        >
                            Generate txt2img
                        </button>
                        <button
                            class="btnSquare btnInterruptClass"
                            id="btnInterruptViewer"
                            style="display: none"
                        >
                            Interrupt
                        </button>
                        <button class="btnSquare" id="btnSelectionArea">
                            Selection Area
                        </button>
                        <div
                            style="
                                display: flex;
                                justify-content: flex-start;
                                padding-top: 3px;
                            "
                        >
                            <!-- <button class="btnSquare acceptClass acceptAllImgBtn"  style="display:none;">Accept All</button>
            <button class="btnSquare discardClass discardAllImgBtn"  style="display:none;">Discard All</button>
            <button class="btnSquare acceptSelectedClass acceptSelectedImgBtn"  style="display:none;">Accept Selected</button>
            <button class="btnSquare discardSelectedClass discardSelectedImgBtn"  style="display:none;">Discard Selected</button> -->
                            <button
                                title="Keep all generated images on the canvas"
                                class="btnSquare acceptClass acceptAllImgBtn"
                                style="display: none; margin-right: 3px"
                            ></button>
                            <button
                                title="Delete all generated images from the canvas"
                                class="btnSquare discardClass discardAllImgBtn"
                                style="display: none; margin-right: 3px"
                            ></button>
                            <button
                                title="Keep only the highlighted images"
                                class="btnSquare acceptSelectedClass acceptSelectedImgBtn"
                                style="display: none; margin-right: 3px"
                            ></button>
                            <button
                                title="Delete only the highlighted images"
                                class="btnSquare discardSelectedClass discardSelectedImgBtn"
                                style="display: none; margin-right: 3px"
                            ></button>
                        </div>

                        <div style="display: inline-flex">
                            <div id="batchNumberViewerTabContainer">
                                <!-- we will append here batch number field here   -->
                                <!-- <sp-label>Images:</sp-label> -->
                                <!-- <sp-textfield id="tiNumberOfImages" type="number" placeholder="1"
                value="1"></sp-textfield> -->
                            </div>
                            <sp-progressbar
                                class="pProgressBars"
                                id="pViewerProgressBar"
                                max="100"
                                value="0"
                                style="margin-left: 10px; width: 100px"
                            >
                                <sp-label slot="label" class="lProgressLabel"
                                    >Progress...</sp-label
                                >
                            </sp-progressbar>
                        </div>

                        <!-- <button class="btnSquare" id="btnLoadViewer">Load</button> -->
                    </div>
                    <div style="display: flex">
                        <sp-slider
                            show-value="true"
                            id="slThumbnailSize"
                            min="1"
                            max="10"
                            value="5"
                            style="width: 100%"
                        >
                            <sp-label slot="label">Thumbnail Size:</sp-label>
                        </sp-slider>
                        <sp-checkbox
                            class="checkbox"
                            id="chSquareThumbnail"
                            style="margin-left: 20px"
                            >Square 1:1</sp-checkbox
                        >
                    </div>
                    <div class="" id="divProgressImageViewerContainer">
                        <!-- <img
                            class=""
                            id="progressImage"
                            src="https://source.unsplash.com/random"
                            style="width: 100px; height: 100px; max-width: 100%"
                        /> -->
                    </div>
                    <!-- <hr class="line-divider" /> -->
                    <sp-divider></sp-divider>

                    <div class="" id="divInitImageViewerContainer">
                        <!-- <img  class="viewer-image" id="viewer_init_image_test" data-metadata_json_string='{"a":1}' src='https://source.unsplash.com/random' /> -->
                    </div>
                    <!-- <hr class="line-divider" /> -->
                    <sp-divider></sp-divider>
                    <div class="" id="divInitMaskViewerContainer">
                        <!-- <img  class="viewer-image" id="viewer_mask_test" data-metadata_json_string='{"a":1}' src='https://source.unsplash.com/random' /> -->
                    </div>
                    <!-- <hr class="line-divider" /> -->
                    <sp-divider></sp-divider>
                    <div class="viewer-container" id="divViewerImagesContainer">
                        <!-- <img  class="viewer-image" id="viewer_output_image_test" data-metadata_json_string='{"a":1}' src='https://source.unsplash.com/random' /> -->
                    </div>
                </div>
                <!-- </div> -->
            </div>
            <div class="sp-tab-page" id="sp-control_net-tab-page">
                <!-- control net tab page -->
                <sp-picker
                    title="auto fill the ControlNet with smart settings, to speed up your working process."
                    size="m"
                    label="ControlNet Preset"
                >
                    <sp-menu id="mControlNetPresetMenu" slot="options">
                        <!-- <sp-menu-item> item </sp-menu-item> -->
                    </sp-menu>
                </sp-picker>
                <div></div>
                <div
                    id="control_net_image_container"
                    class="imgContainer controlNetImaageContainer"
                >
                    <!-- <button class="column-item button-style" id="btnSnapAndFill">Snap And Fill</button> -->
                    <!-- 
                    <div>
                        <img
                            id="all_control_net_image"
                            class="column-item-image"
                            src="https://source.unsplash.com/random"
                            width="300px"
                            height="100px"
                        />
                    </div> -->
                    <div class="imgButton">
                        <button
                            class="column-item button-style btnSquare"
                            id="bSetAllControlImage"
                        >
                            Set All CtrlNet Images
                        </button>
                    </div>
                </div>

                <div id="controlnet_settings_0" style="display: none">
                    <div class="flexContainer">
                        <sp-label slot="label"
                            >Control Net Settings Slot 0</sp-label
                        >
                    </div>
                    <div style="display: flex">
                        <div
                            id="control_net_image_container_0"
                            class="imgContainer controlNetImaageContainer"
                        >
                            <!-- <button class="column-item button-style" id="btnSnapAndFill">Snap And Fill</button> -->

                            <div>
                                <img
                                    id="control_net_image_0"
                                    class="column-item-image"
                                    src="https://source.unsplash.com/random"
                                    width="300px"
                                    height="100px"
                                />
                            </div>
                            <div class="imgButton">
                                <button
                                    class="column-item button-style btnSquare"
                                    id="bSetControlImage_0"
                                >
                                    Set CtrlNet Img
                                </button>
                            </div>
                        </div>
                        <div
                            id="control_net_mask_container_0"
                            class="imgContainer controlNetImaageContainer"
                        >
                            <!-- <button class="column-item button-style" id="btnSnapAndFill">Snap And Fill</button> -->

                            <div>
                                <img
                                    id="control_net_mask_0"
                                    class="column-item-image"
                                    src="https://source.unsplash.com/random"
                                    width="300px"
                                    height="100px"
                                />
                            </div>
                            <div class="imgButton btnClass">
                                <button
                                    class="column-item button-style btnSquare"
                                    id="bControlMask_0"
                                >
                                    View Mask
                                </button>
                            </div>
                        </div>
                    </div>

                    <sp-checkbox id="chEnableControlNet_0">Enable</sp-checkbox>
                    <sp-checkbox checked id="chlowVram_0">Low VRAM</sp-checkbox>
                    <sp-checkbox id="chGuessMode_0">Guess Mode</sp-checkbox>

                    <div>
                        <div>
                            <sp-slider
                                show-value="false"
                                id="slControlNetWeight_0"
                                min="0"
                                max="100"
                                value="50"
                                title="2 will keep the composition; 0 will allow composition to change"
                            >
                                <sp-label slot="label">Weight:</sp-label>
                                <sp-label slot="label" id="lControlNetWeight_0"
                                    >1.0</sp-label
                                >
                            </sp-slider>
                            <sp-slider
                                show-value="false"
                                id="slControlNetGuidanceStrengthStart_0"
                                min="0"
                                max="100"
                                value="0"
                            >
                                <sp-label slot="label"
                                    >Guidance strength start:</sp-label
                                >
                                <sp-label
                                    slot="label"
                                    id="lControlNetGuidanceStrengthStart_0"
                                    >0.0</sp-label
                                >
                            </sp-slider>
                            <sp-slider
                                show-value="false"
                                id="slControlNetGuidanceStrengthEnd_0"
                                min="0"
                                max="100"
                                value="100"
                            >
                                <sp-label slot="label"
                                    >Guidance strength end:</sp-label
                                >
                                <sp-label
                                    slot="label"
                                    id="lControlNetGuidanceStrengthEnd_0"
                                    >1.0</sp-label
                                >
                            </sp-slider>
                        </div>
                    </div>
                    <div id="menu-bar-control_net_0" style="display: flex">
                        <sp-picker size="m" label="Selection type">
                            <sp-menu
                                id="mModulesMenuControlNet_0"
                                slot="options"
                            >
                                <!-- <sp-menu-item> item </sp-menu-item> -->
                            </sp-menu>
                        </sp-picker>
                        <sp-picker size="m" label="Selection type">
                            <sp-menu
                                id="mModelsMenuControlNet_0"
                                slot="options"
                            >
                                <!-- <sp-menu-item> item </sp-menu-item> -->
                            </sp-menu>
                        </sp-picker>

                        <!-- <button class="btnSquare" id="btnRefreshModelsHorde">
                                        Refresh Models
                                    </button> -->
                    </div>
                </div>
                <div></div>
                <sp-divider class="line-divider" size="large"></sp-divider>
                <div id="controlnet_settings_1" style="display: none">
                    <div class="flexContainer">
                        <sp-label slot="label"
                            >Control Net Settings Slot 1</sp-label
                        >
                    </div>
                    <div style="display: flex">
                        <div
                            id="control_net_image_container_1"
                            class="imgContainer controlNetImaageContainer"
                        >
                            <!-- <button class="column-item button-style" id="btnSnapAndFill">Snap And Fill</button> -->

                            <div>
                                <img
                                    id="control_net_image_1"
                                    class="column-item-image"
                                    src="https://source.unsplash.com/random"
                                    width="300px"
                                    height="100px"
                                />
                            </div>
                            <div class="imgButton">
                                <button
                                    class="column-item button-style btnSquare"
                                    id="bSetControlImage_1"
                                >
                                    Set CtrlNet Img
                                </button>
                            </div>
                        </div>
                        <div
                            id="control_net_mask_container_1"
                            class="imgContainer controlNetImaageContainer"
                        >
                            <!-- <button class="column-item button-style" id="btnSnapAndFill">Snap And Fill</button> -->

                            <div>
                                <img
                                    id="control_net_mask_1"
                                    class="column-item-image"
                                    src="https://source.unsplash.com/random"
                                    width="300px"
                                    height="100px"
                                />
                            </div>
                            <div class="imgButton btnClass">
                                <button
                                    class="column-item button-style btnSquare"
                                    id="bControlMask_1"
                                >
                                    View Mask
                                </button>
                            </div>
                        </div>
                    </div>

                    <sp-checkbox id="chEnableControlNet_1">Enable</sp-checkbox>
                    <sp-checkbox checked id="chlowVram_1">Low VRAM</sp-checkbox>
                    <sp-checkbox id="chGuessMode_1">Guess Mode</sp-checkbox>

                    <div>
                        <div>
                            <sp-slider
                                show-value="false"
                                id="slControlNetWeight_1"
                                min="0"
                                max="100"
                                value="50"
                                title="2 will keep the composition; 0 will allow composition to change"
                            >
                                <sp-label slot="label">Weight:</sp-label>
                                <sp-label slot="label" id="lControlNetWeight_1"
                                    >1.0</sp-label
                                >
                            </sp-slider>
                            <sp-slider
                                show-value="false"
                                id="slControlNetGuidanceStrengthStart_1"
                                min="0"
                                max="100"
                                value="0"
                            >
                                <sp-label slot="label"
                                    >Guidance strength start:</sp-label
                                >
                                <sp-label
                                    slot="label"
                                    id="lControlNetGuidanceStrengthStart_1"
                                    >0.0</sp-label
                                >
                            </sp-slider>
                            <sp-slider
                                show-value="false"
                                id="slControlNetGuidanceStrengthEnd_1"
                                min="0"
                                max="100"
                                value="100"
                            >
                                <sp-label slot="label"
                                    >Guidance strength end:</sp-label
                                >
                                <sp-label
                                    slot="label"
                                    id="lControlNetGuidanceStrengthEnd_1"
                                    >1.0</sp-label
                                >
                            </sp-slider>
                        </div>
                    </div>
                    <div id="menu-bar-control_net_1" style="display: flex">
                        <sp-picker size="m" label="Selection type">
                            <sp-menu
                                id="mModulesMenuControlNet_1"
                                slot="options"
                            >
                                <!-- <sp-menu-item> item </sp-menu-item> -->
                            </sp-menu>
                        </sp-picker>
                        <sp-picker size="m" label="Selection type">
                            <sp-menu
                                id="mModelsMenuControlNet_1"
                                slot="options"
                            >
                                <!-- <sp-menu-item> item </sp-menu-item> -->
                            </sp-menu>
                        </sp-picker>

                        <!-- <button class="btnSquare" id="btnRefreshModelsHorde">
                                            Refresh Models
                                        </button> -->
                    </div>
                </div>
                <sp-divider class="line-divider" size="large"></sp-divider>
                <div></div>
                <div id="controlnet_settings_2" style="display: none">
                    <div class="flexContainer">
                        <sp-label slot="label"
                            >Control Net Settings Slot 2</sp-label
                        >
                    </div>
                    <div style="display: flex">
                        <div
                            id="control_net_image_container_2"
                            class="imgContainer controlNetImaageContainer"
                        >
                            <!-- <button class="column-item button-style" id="btnSnapAndFill">Snap And Fill</button> -->

                            <div>
                                <img
                                    id="control_net_image_2"
                                    class="column-item-image"
                                    src="https://source.unsplash.com/random"
                                    width="300px"
                                    height="100px"
                                />
                            </div>
                            <div class="imgButton">
                                <button
                                    class="column-item button-style btnSquare"
                                    id="bSetControlImage_2"
                                >
                                    Set CtrlNet Img
                                </button>
                            </div>
                        </div>
                        <div
                            id="control_net_mask_container_2"
                            class="imgContainer controlNetImaageContainer"
                        >
                            <!-- <button class="column-item button-style" id="btnSnapAndFill">Snap And Fill</button> -->

                            <div>
                                <img
                                    id="control_net_mask_2"
                                    class="column-item-image"
                                    src="https://source.unsplash.com/random"
                                    width="300px"
                                    height="100px"
                                />
                            </div>
                            <div class="imgButton btnClass">
                                <button
                                    class="column-item button-style btnSquare"
                                    id="bControlMask_2"
                                >
                                    View Mask
                                </button>
                            </div>
                        </div>
                    </div>

                    <sp-checkbox id="chEnableControlNet_2">Enable</sp-checkbox>
                    <sp-checkbox checked id="chlowVram_2">Low VRAM</sp-checkbox>
                    <sp-checkbox id="chGuessMode_2">Guess Mode</sp-checkbox>

                    <div>
                        <div>
                            <sp-slider
                                show-value="false"
                                id="slControlNetWeight_2"
                                min="0"
                                max="100"
                                value="50"
                                title="2 will keep the composition; 0 will allow composition to change"
                            >
                                <sp-label slot="label">Weight:</sp-label>
                                <sp-label slot="label" id="lControlNetWeight_2"
                                    >1.0</sp-label
                                >
                            </sp-slider>
                            <sp-slider
                                show-value="false"
                                id="slControlNetGuidanceStrengthStart_2"
                                min="0"
                                max="100"
                                value="0"
                            >
                                <sp-label slot="label"
                                    >Guidance strength start:</sp-label
                                >
                                <sp-label
                                    slot="label"
                                    id="lControlNetGuidanceStrengthStart_2"
                                    >0.0</sp-label
                                >
                            </sp-slider>
                            <sp-slider
                                show-value="false"
                                id="slControlNetGuidanceStrengthEnd_2"
                                min="0"
                                max="100"
                                value="100"
                            >
                                <sp-label slot="label"
                                    >Guidance strength end:</sp-label
                                >
                                <sp-label
                                    slot="label"
                                    id="lControlNetGuidanceStrengthEnd_2"
                                    >1.0</sp-label
                                >
                            </sp-slider>
                        </div>
                    </div>
                    <div id="menu-bar-control_net_2" style="display: flex">
                        <sp-picker size="m" label="Selection type">
                            <sp-menu
                                id="mModulesMenuControlNet_2"
                                slot="options"
                            >
                                <!-- <sp-menu-item> item </sp-menu-item> -->
                            </sp-menu>
                        </sp-picker>
                        <sp-picker size="m" label="Selection type">
                            <sp-menu
                                id="mModelsMenuControlNet_2"
                                slot="options"
                            >
                                <!-- <sp-menu-item> item </sp-menu-item> -->
                            </sp-menu>
                        </sp-picker>

                        <!-- <button class="btnSquare" id="btnRefreshModelsHorde">
                                                Refresh Models
                                            </button> -->
                    </div>
                </div>
                <sp-divider class="line-divider" size="large"></sp-divider>
            </div>
            <div class="sp-tab-page" id="sp-history-tab-page">
                <div class="subTabOptionsContainer"></div>

                <div class="flexContainer">
                    <sp-label slot="label"
                        >history of all the images you generated</sp-label
                    >
                    <div id="historySeedLabelContainer">
                        <sp-label slot="label">Seed:</sp-label
                        ><sp-label slot="label" id="historySeedLabel"
                            >00000000000</sp-label
                        >
                    </div>
                </div>
                <div></div>
                <div>
                    <button class="btnSquare" id="btnLoadHistory">
                        Load Previous Generations
                    </button>
                </div>
                <div class="viewer-container" id="divHistoryImagesContainer">
                    <img
                        class="history-image"
                        id="history_image_test"
                        data-metadata_json_string='{"a":1}'
                        src="https://source.unsplash.com/random"
                    />
                </div>
            </div>
            <div class="sp-tab-page" id="sp-image_search-tab-page">
                <div class="subTabOptionsContainer"></div>

                <div class="flexContainer">
                    <sp-label slot="label">Image Search Engine</sp-label>
                </div>
                <div></div>
                <div>
                    <sp-textfield
                        id="imageSearchField"
                        type="text"
                        placeholder="cute cats"
                        value=""
                        ><sp-label slot="label">Search:</sp-label></sp-textfield
                    >

                    <button class="btnSquare" id="btnImageSearch">
                        Image Search
                    </button>
                </div>
                <div
                    class="viewer-container"
                    id="divImageSearchImagesContainer"
                >
                    <img
                        class="history-image"
                        id="search_image_placeholder"
                        data-metadata_json_string='{"a":1}'
                        src="https://source.unsplash.com/random"
                    />
                </div>
            </div>
            <div class="sp-tab-page" id="sp-prompts-library-tab-page">
                <div class="subTabOptionsContainer"></div>
                <sp-label slot="label"
                    >Prompt Shortcut: a single word that represent a
                    prompt</sp-label
                >
                <div class="">
                    <sp-label slot="label"
                        >Key for new prompt shortcut</sp-label
                    >
                    <sp-textarea
                        id="KeyPromptShortcut"
                        placeholder="to be replaced"
                        value=""
                    ></sp-textarea>
                </div>
                <div class="">
                    <sp-label slot="label"
                        >Value for new prompt shortcut</sp-label
                    >
                    <sp-textarea
                        id="ValuePromptShortcut"
                        placeholder="to be replaced with"
                        value=""
                    ></sp-textarea>
                    <button class="btnSquare" id="btnUpdatePromptShortcut">
                        Add to Prompt Shortcut
                    </button>
                </div>
                <div class="">
                    <sp-textarea
                        id="taPromptShortcut"
                        placeholder="prompt shortcut"
                        value=""
                    ></sp-textarea>
                </div>
                <div>
                    <sp-picker size="m" label="Selection a prompt">
                        <sp-menu id="mPromptShortcutMenu" slot="options">
                            <!-- <sp-menu-item> item </sp-menu-item> -->
                        </sp-menu>
                    </sp-picker>
                    <button class="btnSquare" id="btnRefreshPromptShortcutMenu">
                        Refresh Menu
                    </button>
                </div>
                <div>
                    <button class="btnSquare" id="btnLoadPromptShortcut">
                        Load
                    </button>
                    <button class="btnSquare" id="btnSavePromptShortcut">
                        Save
                    </button>
                </div>
            </div>
            <div class="sp-tab-page" id="sp-horde-tab-page">
                <!-- Horde tab page -->
                <div></div>
                <div>
                    <sp-label>Horde Key:</sp-label
                    ><sp-textfield
                        id="tiHordeApiKey"
                        type="password"
                        placeholder="0000000000"
                        value=""
                    ></sp-textfield>
                    <button class="btnSquare" id="btnSaveHordeSettings">
                        Save
                    </button>
                </div>

                <sp-radio-group>
                    <sp-label id="BackendTypeLabel" slot="label"
                        >Select Backend:</sp-label
                    >
                    <!-- <sp-label slot="label">Select a Mode:</sp-label> -->
                    <sp-radio
                        title="use the horde with the plugin no need to install anything else"
                        class="rbBackendType"
                        value="horde_native"
                        >Native Horde</sp-radio
                    >
                    <sp-radio
                        title="Use the horde extension from Automatic1111 Extension tab"
                        class="rbBackendType"
                        value="auto1111_horde_extension"
                        >Auto1111 Horde Extension</sp-radio
                    >
                    <sp-radio
                        title="use Auto1111 disable the Horde"
                        class="rbBackendType"
                        value="auto1111"
                        checked
                        >Auto1111 Only</sp-radio
                    >
                    <!-- <sp-tooltip id="tool_tip" open placement="top">use this when you want to fill empty areas of the canvas</sp-tooltip> -->
                </sp-radio-group>

                <div id="menu-bar-container_horde" style="display: flex">
                    <sp-picker size="m" label="Selection type">
                        <sp-menu id="mModelsMenuHorde" slot="options">
                            <!-- <sp-menu-item> item </sp-menu-item> -->
                        </sp-menu>
                    </sp-picker>

                    <button class="btnSquare" id="btnRefreshModelsHorde">
                        Refresh Models
                    </button>
                    <!-- <sp-label slot="label"
              id="lVersionNumber">v0.0.0</sp-label> -->
                </div>
                <div>
                    <sp-checkbox id="chUseNSFW">NSFW</sp-checkbox>
                    <sp-checkbox id="chUseSharedLaion"
                        >Share with LION</sp-checkbox
                    >
                    <sp-slider
                        style="display: none"
                        show-value="true"
                        id="slSeedVariation"
                        min="1"
                        max="30"
                        value="1"
                    >
                        <sp-label slot="label">Seed variation:</sp-label>
                    </sp-slider>
                </div>
            </div>
            <div class="sp-tab-page" id="sp-extras-tab-page">
                <div style="padding-bottom: 5px">
                    <!-- extras tab page -->
                    <sp-slider
                        style="display: block"
                        show-value="false"
                        id="slUpscaleSize"
                        min="10"
                        max="80"
                        value="20"
                        title="Resize scale of current selection size"
                    >
                        <sp-label slot="label">Resize</sp-label>
                        <sp-label
                            class="labelNumber"
                            slot="label"
                            id="lUpscaleSize"
                            >2</sp-label
                        >
                    </sp-slider>
                </div>
                <div
                    style="
                        display: inline-flex;
                        justify-content: flex-start;
                        padding-bottom: 5px;
                    "
                >
                    <button
                        class="btnSquare btnGenerateClass"
                        id="btnGenerateUpscale"
                    >
                        Generate upscale
                    </button>
                    <button
                        class="btnSquare btnInterruptClass"
                        id="btnInterruptUpscale"
                        style="display: none"
                    >
                        Interrupt
                    </button>
                    <div style="padding-left: 5px">
                        <button
                            class="btnSquare acceptClass acceptAllImgBtn"
                            style="display: none; margin-right: 3px"
                        ></button>
                        <button
                            class="btnSquare discardClass discardAllImgBtn"
                            style="display: none; margin-right: 3px"
                        ></button>
                        <button
                            class="btnSquare snapshotButton"
                            id="btnSnapshotUpscale"
                            style="margin-right: 3px"
                            title="create a snapshot of what you see on the canvas and place on a new layer"
                        ></button>
                        <button
                            class="btnSquare resetButton"
                            id="btnResetSettingsUpscale"
                            title="reset the ui settings to their default values"
                        ></button>
                    </div>
                </div>
                <!-- <div id="progressContainerUpscale" class="" style="padding-bottom: 5px;">
                    <sp-progressbar class="pProgressBars" id="pProgressBarUpscale" max="100" value="0">
                        <sp-label slot="label">Progress...</sp-label>
                    </sp-progressbar>
                </div> -->
                <div
                    id="progressContainerUpscale"
                    class=""
                    style="padding-bottom: 5px"
                >
                    <sp-label slot="label" class="lProgressLabel"
                        >No work in progress</sp-label
                    >
                </div>
                <div style="padding-bottom: 5px">
                    <sp-label style="width: 60px; display: inline-block"
                        >Upscaler 1:
                    </sp-label>
                    <sp-picker size="m" label="Upscaler Options">
                        <sp-menu
                            id="hrModelsMenuUpscale1"
                            class="hrExtrasUpscaleModelsMenuClass"
                            slot="options"
                        >
                            <!-- <sp-menu-item> item </sp-menu-item> -->
                        </sp-menu>
                    </sp-picker>
                    <div></div>
                    <sp-label style="width: 60px; display: inline-block"
                        >Upscaler 2:
                    </sp-label>
                    <sp-picker size="m" label="Upscaler Options">
                        <sp-menu
                            id="hrModelsMenuUpscale2"
                            class="hrExtrasUpscaleModelsMenuClass"
                            slot="options"
                        >
                            <!-- <sp-menu-item> item </sp-menu-item> -->
                        </sp-menu>
                    </sp-picker>
                </div>
                <div style="padding-bottom: 5px">
                    <!-- extras tab page -->
                    <sp-slider
                        style="display: block"
                        show-value="false"
                        id="slUpscaler2Visibility"
                        min="0"
                        max="10"
                        value="0"
                    >
                        <sp-label
                            style="width: 110px; display: inline-block"
                            slot="label"
                            >Upscaler 2 visibility:
                        </sp-label>
                        <sp-label
                            style="display: inline-block"
                            class="labelNumber"
                            slot="label"
                            id="lUpscaler2Visibility"
                            >0</sp-label
                        >
                    </sp-slider>
                </div>
                <div style="padding-bottom: 5px">
                    <!-- extras tab page -->
                    <sp-slider
                        style="display: block"
                        show-value="false"
                        id="slGFPGANVisibility"
                        min="0"
                        max="10"
                        value="0"
                    >
                        <sp-label
                            style="width: 110px; display: inline-block"
                            slot="label"
                            >GFPGAN visibility:
                        </sp-label>
                        <sp-label
                            style="display: inline-block"
                            class="labelNumber"
                            slot="label"
                            id="lGFPGANVisibility"
                            >0</sp-label
                        >
                    </sp-slider>
                </div>
                <div style="padding-bottom: 5px">
                    <!-- extras tab page -->
                    <sp-slider
                        style="display: block"
                        show-value="false"
                        id="slCodeFormerVisibility"
                        min="0"
                        max="10"
                        value="0"
                    >
                        <sp-label
                            style="width: 110px; display: inline-block"
                            slot="label"
                            >CodeFormer visibility:
                        </sp-label>
                        <sp-label
                            style="display: inline-block"
                            class="labelNumber"
                            slot="label"
                            id="lCodeFormerVisibility"
                            >0</sp-label
                        >
                    </sp-slider>
                </div>
                <div style="padding-bottom: 5px">
                    <!-- extras tab page -->
                    <sp-slider
                        style="display: block"
                        show-value="false"
                        id="slCodeFormerWeight"
                        min="0"
                        max="10"
                        value="0"
                    >
                        <sp-label
                            style="width: 110px; display: inline-block"
                            slot="label"
                            >CodeFormer weight:
                        </sp-label>
                        <sp-label
                            style="display: inline-block"
                            class="labelNumber"
                            slot="label"
                            id="lCodeFormerWeight"
                            >0</sp-label
                        >
                    </sp-slider>
                </div>
            </div>
            <div class="sp-tab-page" id="sp-presets-tab-page">
                <!-- settings tab page -->
                <div class="SettingsSubTabOptionsContainer"></div>
                <div>
                    <sp-textfield
                        id="tiPresetName"
                        type="text"
                        placeholder="Preset Name"
                        value=""
                        style="width: 160px"
                    ></sp-textfield
                    ><button
                        class="btnSquare"
                        id="btnNewPreset"
                        style="margin-left: 5px"
                    >
                        New Preset
                    </button>
                    <div>
                        <sp-radio-group id="rgPresetType">
                            <sp-label slot="label">Preset Type:</sp-label>
                            <!-- <sp-label slot="label">Select a Mode:</sp-label> -->
                            <sp-radio
                                title="Use to create Stable Diffusion tab Preset"
                                class="rbPresetType"
                                value="sd_preset"
                                checked
                                >SD Preset</sp-radio
                            >
                            <sp-radio
                                title="Use to create a ControlNet preset"
                                class="rbPresetType"
                                value="controlnet_preset"
                                >ControlNet Preset</sp-radio
                            >
                        </sp-radio-group>
                    </div>
                    <!-- <button
                        class="btnSquare"
                        id="btnEditPresetName"
                        style="margin-left: 5px"
                    >
                        Edit Name
                    </button> -->

                    <button
                        class="btnSquare"
                        id="btnSavePreset"
                        style="margin-left: 5px"
                    >
                        Save Preset
                    </button>
                    <button
                        class="btnSquare"
                        id="btnDeletePreset"
                        style="margin-left: 5px"
                    >
                        Delete Preset
                    </button>
                    <div style="display: inline-flex">
                        <sp-picker
                            title="auto fill the plugin with smart settings, to speed up your working process."
                            size="s"
                            label="Smart Preset"
                        >
                            <sp-menu id="mSettingTabPresetMenu" slot="options">
                                <!-- <sp-menu-item> item </sp-menu-item> -->
                            </sp-menu>
                        </sp-picker>
                    </div>
                    <div>
                        <sp-label id="lPresetName"></sp-label>
                    </div>
                    <div class="">
                        <sp-textarea
                            id="taPresetSettings"
                            placeholder="{}"
                            value=""
                        ></sp-textarea>
                    </div>
                </div>
            </div>
            <div class="sp-tab-page" id="sp-settings-tab-page">
                <!-- settings tab page -->
                <div class="SettingsSubTabOptionsContainer">
                    <sp-radio-group
                        id="rgSubTab"
                        class="rbMaskContent"
                        data-container-class="SettingsSubTabOptionsContainer"
                    >
                        <sp-radio
                            title=""
                            class="rbSubTab"
                            id="rbSettingsTab"
                            checked
                            value="settings"
                            data-tab-name="sp-settings-tab"
                            >Settings</sp-radio
                        >
                        <sp-radio
                            title=""
                            class="rbSubTab"
                            id="rbPresetsTab"
                            value="presets"
                            data-tab-name="sp-presets-tab"
                            >Custom Presets</sp-radio
                        >
                    </sp-radio-group>
                </div>
                <div>
                    <sp-label>SD Url:</sp-label
                    ><sp-textfield
                        id="tiSdUrl"
                        type="text"
                        placeholder="http://127.0.0.1:7860"
                        value=""
                        style="width: 160px"
                    ></sp-textfield
                    ><button
                        class="btnSquare"
                        id="btnSdUrl"
                        style="margin-left: 5px"
                    >
                        Submit
                    </button>
                    <button class="btnSquare" id="btnSaveSettingsTabs">
                        Save
                    </button>
                </div>
                <sp-checkbox id="chUseSharpMask">use sharp mask</sp-checkbox>
                <sp-checkbox checked id="chUseSmartObject"
                    >Smart Object</sp-checkbox
                >
                <sp-checkbox checked id="chLiveProgressImage"
                    >Live Progress Image</sp-checkbox
                >

                <sp-checkbox checked id="chUseOriginalPrompt"
                    >Restore Original Prompt</sp-checkbox
                >

                <sp-checkbox checked id="chUseSilentMode" style="display: none"
                    >Use Silent Mode</sp-checkbox
                >
                <sp-radio-group>
                    <sp-label slot="label"
                        >Your PC Speed(optimization):</sp-label
                    >
                    <!-- <sp-label slot="label">Select a Mode:</sp-label> -->
                    <sp-radio title="" class="rbPCSpeed" value="slow"
                        >Slow PC</sp-radio
                    >
                    <sp-radio title="" class="rbPCSpeed" value="fast" checked
                        >Fast PC</sp-radio
                    >

                    <!-- <sp-tooltip id="tool_tip" open placement="top">use this when you want to fill empty areas of the canvas</sp-tooltip> -->
                </sp-radio-group>
                <!-- <a href="https://colab.research.google.com/drive/1nbcx_WOneRmYv9idBO33pN5CbxXrqZHu?usp=sharing" target="_blank">Don't have GPU, use Colab</a> -->
                <sp-link
                    href="https://colab.research.google.com/drive/1nbcx_WOneRmYv9idBO33pN5CbxXrqZHu?usp=sharing"
                    >Use Colab</sp-link
                >
                <div>
                    <sp-radio-group>
                        <sp-label slot="label">Select Extension:</sp-label>
                        <!-- <sp-label slot="label">Select a Mode:</sp-label> -->
                        <sp-radio
                            title="use the proxy server, need to run 'start_server.bat' "
                            class="rbExtensionType"
                            value="proxy_server"
                            >Proxy Server</sp-radio
                        >
                        <sp-radio
                            title="use Automatic1111 Photoshop SD Extension, need to install the extension in Auto1111"
                            class="rbExtensionType"
                            value="auto1111_extension"
                            checked
                            >Auto111 Extension</sp-radio
                        >
                        <sp-radio
                            title="Use the Plugin Only No Additional Component"
                            class="rbExtensionType"
                            value="none"
                            >None</sp-radio
                        >
                        <!-- <sp-tooltip id="tool_tip" open placement="top">use this when you want to fill empty areas of the canvas</sp-tooltip> -->
                    </sp-radio-group>
                </div>
                <div>
                    <sp-textfield
                        title="copy paste the address to access the folder where the images are stored"
                        id="tiDocPath"
                        type="text"
                        placeholder=""
                        value=""
                    >
                        <sp-label slot="label"
                            >Folder Path (read only):</sp-label
                        >
                    </sp-textfield>
                    <button class="btnSquare" id="btnGetDocPath">
                        Get Path
                    </button>
                </div>
            </div>

            <div
                class="sp-tab-page visible-hack"
                id="sp-stable-diffusion-ui-tab-page"
            >
                <div id="menu-bar-container">
                    <sp-picker
                        size="m"
                        label="Selection type"
                        style="margin-right: 3px"
                    >
                        <sp-menu id="mModelsMenu" slot="options">
                            <!-- <sp-menu-item> item </sp-menu-item> -->
                        </sp-menu>
                    </sp-picker>

                    <button
                        title="Refresh the plugin, only fixes minor issues."
                        class=""
                        id="btnRefreshModels"
                    >
                        Refresh
                    </button>
                    <button
                        title="Update the plugin if you encounter bugs. Get the latest features"
                        class="btnSquare"
                        id="btnUpdate"
                    >
                        Update
                    </button>
                    <!-- <sp-label slot="label"
          id="lVersionNumber">v0.0.0</sp-label> -->
                </div>

                <!-- stable diffusion tab page -->

                <div id="sdBtnContainer">
                    <div
                        style="
                            display: inline-flex;
                            justify-content: space-between;
                        "
                    >
                        <button
                            class="btnSquare layerToSelection"
                            id="btnLayerToSelection"
                            style="margin-right: 3px"
                            title="Move and reSize the highlighted layer to fit into the Selection Area "
                        ></button>
                        <button class="btnSquare btnGenerateClass">
                            Generate txt2img
                        </button>
                        <!-- <div class="divBtn btnSquare btnGenerateClass">
                            Generate txt2img
                        </div> -->

                        <button
                            class="btnSquare btnInterruptClass"
                            id="btnInterrupt"
                            style="display: none"
                        >
                            Interrupt
                        </button>
                    </div>
                    <!-- <button class="btnSquare btnInterruptClass" style="display:none;">Interrupt More</button> -->
                    <!-- <button class="btnSquare" id="btnCleanLayers">Clean Layers</button> -->
                    <!-- <button class="btnSquare acceptClass acceptAllImgBtn"  style="display:none;">Accept All</button>
        <button class="btnSquare discardClass discardAllImgBtn"  style="display:none;">Discard All</button> -->

                    <div
                        style="
                            display: inline-flex;
                            justify-content: flex-start;
                            width: 133px;
                        "
                    >
                        <button
                            class="btnSquare acceptClass acceptAllImgBtn"
                            style="display: none; margin-right: 3px"
                        ></button>
                        <button
                            class="btnSquare discardClass discardAllImgBtn"
                            style="display: none; margin-right: 3px"
                        ></button>
                        <!-- <button class="btnSquare customClass"  style="display:none;">Accept Selected</button> -->
                        <button
                            class="btnSquare snapshotButton"
                            id="btnSnapshot"
                            style="margin-right: 3px"
                            title="create a snapshot of what you see on the canvas and place on a new layer"
                        ></button>
                        <button
                            class="btnSquare resetButton"
                            id="btnResetSettings"
                            title="reset the ui settings to their default values"
                        ></button>

                        <!-- <button class="btnSquare" id="btnLinkCurrentDocument">Link Current Document</button> -->
                    </div>
                </div>

                <div>
                    <div id="progressContainer" class="">
                        <sp-progressbar
                            class="pProgressBars"
                            id="pProgressBar"
                            max="100"
                            value="0"
                        >
                            <sp-label slot="label" class="lProgressLabel"
                                >Progress...</sp-label
                            >
                        </sp-progressbar>
                        <sp-checkbox
                            title="use {keyword} form the prompts library"
                            id="chUsePromptShortcut"
                            checked
                            >prompt shortcut</sp-checkbox
                        >
                    </div>
                    <div>
                        <!-- icon only svg button -->
                        <sp-action-button
                            id="svg_sp_btn"
                            style="
                                padding: 0;
                                max-width: 32px;
                                max-height: 32px;
                                display: none;
                            "
                        >
                            <div slot="icon" style="fill: currentColor">
                                <svg
                                    viewBox="0 0 36 36"
                                    style="width: 18px; height: 18px"
                                >
                                    <path
                                        d="M33.567 8.2L27.8 2.432a1.215 1.215 0 0 0-.866-.353H26.9a1.371 1.371 0 0 0-.927.406L5.084 23.372a.99.99 0 0 0-.251.422L2.055 33.1c-.114.377.459.851.783.851a.251.251 0 0 0 .062-.007c.276-.063 7.866-2.344 9.311-2.778a.972.972 0 0 0 .414-.249l20.888-20.889a1.372 1.372 0 0 0 .4-.883 1.221 1.221 0 0 0-.346-.945zM11.4 29.316c-2.161.649-4.862 1.465-6.729 2.022l2.009-6.73z"
                                    />
                                </svg>
                            </div>
                        </sp-action-button>

                        <!-- icon with svg button -->
                        <sp-action-button style="display: none">
                            <div slot="icon" style="fill: currentColor">
                                <svg
                                    viewBox="0 0 36 36"
                                    style="width: 18px; height: 18px"
                                >
                                    <path
                                        d="M33.567 8.2L27.8 2.432a1.215 1.215 0 0 0-.866-.353H26.9a1.371 1.371 0 0 0-.927.406L5.084 23.372a.99.99 0 0 0-.251.422L2.055 33.1c-.114.377.459.851.783.851a.251.251 0 0 0 .062-.007c.276-.063 7.866-2.344 9.311-2.778a.972.972 0 0 0 .414-.249l20.888-20.889a1.372 1.372 0 0 0 .4-.883 1.221 1.221 0 0 0-.346-.945zM11.4 29.316c-2.161.649-4.862 1.465-6.729 2.022l2.009-6.73z"
                                    />
                                </svg>
                            </div>
                            Edit Text
                        </sp-action-button>
                        <sp-action-button
                            id="svg_sp_btn_datadownload"
                            style="
                                padding: 0;
                                max-width: 32px;
                                max-height: 32px;
                                display: none;
                            "
                        >
                            <div slot="icon" style="fill: currentColor">
                                <svg
                                    viewBox="0 0 18 18"
                                    style="width: 18px; height: 18px"
                                >
                                    <path
                                        d="M5.3885,12.5895a1.211,1.211,0,0,1-.314-.8C3.2305,11.478,1.509,10.942,1,10.135V14.5C1,15.8805,4.582,17,9,17c.1385,0,.2735-.0045.4105-.0065Z"
                                    />
                                    <path
                                        d="M16.5,6.5V9.3635A1.18,1.18,0,0,0,17,8.5V5.135A5.06144,5.06144,0,0,1,14.3855,6.5Z"
                                    />
                                    <path
                                        d="M6.315,10.5H8.5V7.13C5.953,7.059,1.8365,6.4625,1,5.135V8.5c0,.996,1.868,1.8535,4.565,2.255A1.21847,1.21847,0,0,1,6.315,10.5Z"
                                    />
                                    <path
                                        d="M17.573,12.427A.25.25,0,0,0,17.3965,12H15V8H10v4H7.6035a.25.25,0,0,0-.1765.427L12.5,18Z"
                                    />
                                </svg>
                            </div>
                        </sp-action-button>
                        <!-- <img width="15px" height="15px" src="./icon/ftcopy.svg">   -->
                    </div>
                    <img
                        id="webp_container"
                        src="https://www.keycdn.com/img/blog/convert-to-webp-the-successor-of-jpeg-lg.webp"
                    />

                    <div class="prompts">
                        <!-- <sp-label slot="label">Prompt</sp-label> -->
                        <div class="">
                            <sp-textarea
                                id="taPrompt"
                                placeholder="Prompt"
                                value="cute cat, {painterly_style_1}"
                            ></sp-textarea>
                            <!-- <textarea id="taPrompt" placeholder="Prompt" value="cute cat"></textarea> -->
                        </div>

                        <div class="">
                            <sp-textarea
                                id="taNegativePrompt"
                                placeholder="Negative Prompt"
                                id="taNegativePrompt"
                                value="{ugly}"
                                multiline
                                grows
                            ></sp-textarea>
                        </div>
                    </div>

                    <sp-radio-group>
                        <!-- <sp-label slot="label">Select a Mode:</sp-label> -->
                        <sp-radio
                            title="use this mode to generate images from text only"
                            class="rbMode"
                            checked
                            value="txt2img"
                            >txt2img</sp-radio
                        >
                        <sp-radio
                            title="use this mode to generate variation of an image"
                            class="rbMode"
                            value="img2img"
                            >img2img</sp-radio
                        >
                        <sp-radio
                            title="use this mode to generate variation of a small area of an image, while keeping the rest of the image intact"
                            class="rbMode"
                            id="rbModeInpaint"
                            value="inpaint"
                            >inpaint</sp-radio
                        >
                        <sp-radio
                            title="use this mode to (1) fill any missing area of an image,(2) expand an image"
                            class="rbMode"
                            id="rbOutpaintMode"
                            value="outpaint"
                            >outpaint</sp-radio
                        >
                        <!-- <sp-tooltip id="tool_tip" open placement="top">use this when you want to fill empty areas of the canvas</sp-tooltip> -->
                    </sp-radio-group>

                    <div id="image_viewer">
                        <div class="imgButton">
                            <!-- 
            <button class="button-style2" id="btnInitInpaint">Init inpaint
              Mask</button> -->
                            <!-- <button button class="button-style2" id="btnInitOutpaint">Init Outpaint
              Mask</button> -->
                        </div>

                        <!-- <sp-detail>Image from Web:</sp-detail> -->

                        <!--       
          <img id="init_image" src='' width="100" height="100">
          <img id="init_image_mask" src='' width="100" height="100"> -->
                        <!-- <sp-checkbox id="chUseMaskImage">use mask image</sp-checkbox> -->
                        <table id="tableInitImageContainer">
                            <tr>
                                <td id="initImageColumn">
                                    <div
                                        id="init_image_container"
                                        class="imgContainer"
                                    >
                                        <!-- <button class="column-item button-style" id="btnSnapAndFill">Snap And Fill</button> -->

                                        <div>
                                            <img
                                                id="init_image"
                                                class="column-item-image"
                                                src="https://source.unsplash.com/random"
                                                width="300px"
                                                height="100px"
                                            />
                                        </div>
                                        <div class="imgButton">
                                            <button
                                                class="column-item button-style disabled-btn"
                                                disabled
                                                id="bSetInitImage"
                                            >
                                                Image
                                            </button>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div
                                        id="init_image_mask_container"
                                        class="imgContainer"
                                    >
                                        <div>
                                            <img
                                                id="init_image_mask"
                                                class="column-item-image"
                                                src="https://source.unsplash.com/random"
                                                width="100px"
                                                height="100px"
                                            />
                                        </div>
                                        <div class="imgButton">
                                            <button
                                                class="column-item button-style disabled-btn"
                                                disabled
                                                id="bSetInitImageMask"
                                            >
                                                Mask
                                            </button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="">
                    <div id="batchNumber-steps-container">
                        <div id="batchNumberUi">
                            <div style="display: flex">
                                <div id="batchNumberSdUiTabContainer">
                                    <sp-label>Images:</sp-label
                                    ><sp-textfield
                                        title="the number of images to generate at once.The larger the number more VRAM stable diffusion will use."
                                        id="tiNumberOfImages"
                                        type="number"
                                        placeholder="1"
                                        value="1"
                                    ></sp-textfield>
                                </div>
                                <div>
                                    <sp-label>Steps:</sp-label
                                    ><sp-textfield
                                        title="the higher the steps the longer it will take to generate an image"
                                        id="tiNumberOfSteps"
                                        type="number"
                                        placeholder="20"
                                        value="20"
                                    ></sp-textfield>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="selectionMode">
                        <div>
                            <sp-label id="rbSelectionModeLabel" slot="label"
                                >Selection Mode:</sp-label
                            >
                        </div>

                        <div
                            id="menu-bar-container_preset"
                            style="display: inline-flex"
                        >
                            <sp-radio-group id="selectionModeGroup" class="">
                                <sp-radio
                                    class="rbSelectionMode"
                                    checked
                                    value="ratio"
                                    >ratio</sp-radio
                                >
                                <sp-radio
                                    title="use the selection area width and height to fill the width and height sliders"
                                    class="rbSelectionMode"
                                    value="precise"
                                    >precise</sp-radio
                                >
                                <sp-radio
                                    title="fill the width and height sliders manually"
                                    class="rbSelectionMode"
                                    value="ignore"
                                    >ignore</sp-radio
                                >
                            </sp-radio-group>

                            <sp-picker
                                title="auto fill the plugin with smart settings, to speed up your working process."
                                size="s"
                                label="Smart Preset"
                            >
                                <sp-menu id="mPresetMenu" slot="options">
                                    <!-- <sp-menu-item> item </sp-menu-item> -->
                                </sp-menu>
                            </sp-picker>
                        </div>
                        <div
                            style="
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            "
                        >
                            <sp-slider
                                show-value="false"
                                id="slWidth"
                                min="1"
                                max="32"
                                value="8"
                                data-old_value="512"
                            >
                                <sp-label slot="label">Width:</sp-label>
                                <sp-label
                                    class="labelNumber"
                                    slot="label"
                                    id="lWidth"
                                    >512</sp-label
                                >
                            </sp-slider>
                            <button
                                class="btnSquare linkSlider whiteChain"
                                id="linkWidthHeight"
                                title="maintain the ratio between width and height slider"
                                data-b_link="true"
                            ></button>
                            <sp-slider
                                show-value="false"
                                id="slHeight"
                                min="1"
                                max="32"
                                value="8"
                                data-old_value="512"
                            >
                                <sp-label slot="label">Height:</sp-label>
                                <sp-label
                                    class="labelNumber"
                                    slot="label"
                                    id="lHeight"
                                    >512</sp-label
                                >

                                <sp-label
                                    class="res-increase"
                                    id="res-difference"
                                    slot="label"
                                ></sp-label>
                            </sp-slider>
                            <!-- <sp-label slot="label"
                                >512x512 => 1024x1024</sp-label >-->
                        </div>
                        <!-- <div id='hi-res-sliders-container' style="display:none;">
          <sp-slider show-value="false" id="hrWidth" min="1" max="32" value="8">
            <sp-label slot="label">Hi Res Width:</sp-label>
            <sp-label class="labelNumber" slot="label" id="hWidth">512</sp-label>
          </sp-slider>
          <sp-slider show-value="false" id="hrHeight" min="1" max="32" value="8">
            <sp-label slot="label">Hi Res Height:</sp-label>
            <sp-label class="labelNumber" slot="label" id="hHeight">512</sp-label>
          </sp-slider>
          <sp-slider show-value="false" id="hrDenoisingStrength" min="0" max="100" value="70">
            <sp-label slot="label">Hi Res Denoising:</sp-label>
            <sp-label class="labelNumber" slot="label" id="hDenoisingStrength">0.7</sp-label>
          </sp-slider>
        </div> -->
                        <div style="display: flex">
                            <sp-slider
                                title="larger value will put more emphasis on the prompt"
                                show-value="true"
                                id="slCfgScale"
                                min="1"
                                max="30"
                                value="7"
                            >
                                <sp-label slot="label">CFG Scale:</sp-label>
                                <!-- <sp-label slot="label" id="lCfgScale">7</sp-label> -->
                            </sp-slider>

                            <sp-slider
                                show-value="false"
                                id="slDenoisingStrength"
                                min="0"
                                max="100"
                                value="70"
                            >
                                <sp-label slot="label"
                                    >Denoising Strength:</sp-label
                                >
                                <sp-label slot="label" id="lDenoisingStrength"
                                    >0.7</sp-label
                                >
                            </sp-slider>
                        </div>

                        <sp-slider
                            show-value="true"
                            id="slMaskBlur"
                            min="0"
                            max="64"
                            value="7"
                        >
                            <sp-label slot="label">Mask Blur:</sp-label>
                            <!-- <sp-label slot="label" id="lDenoisingStrength">0.7</sp-label> -->
                        </sp-slider>
                        <sp-slider
                            show-value="true"
                            id="slMaskExpansion"
                            min="0"
                            max="256"
                            value="40"
                            title="the larger the value the more the mask will expand, '0' means use precise masking, use in combination with the mask blur"
                        >
                            <sp-label slot="label">Mask Expansion:</sp-label>
                            <!-- <sp-label slot="label" id="lDenoisingStrength">0.7</sp-label> -->
                        </sp-slider>

                        <div style="display: flex">
                            <sp-slider
                                show-value="false"
                                id="slInpaintingMaskWeight"
                                min="0"
                                max="100"
                                value="100"
                                title="0 will keep the composition; 1 will allow composition to change"
                            >
                                <sp-label slot="label"
                                    >Inpainting conditioning mask
                                    strength:</sp-label
                                >
                                <sp-label
                                    slot="label"
                                    id="lInpaintingMaskWeight"
                                    >1</sp-label
                                >
                            </sp-slider>
                        </div>

                        <div id="slInpainting_fill">
                            <sp-radio-group id="Inpainting_fill_group" class="">
                                <sp-label slot="label">Mask Content:</sp-label>
                                <sp-radio
                                    class="rbMaskContent"
                                    checked
                                    value="0"
                                    >fill</sp-radio
                                >
                                <sp-radio class="rbMaskContent" value="1"
                                    >original</sp-radio
                                >
                                <sp-radio class="rbMaskContent" value="2"
                                    >latent noise</sp-radio
                                >
                                <sp-radio class="rbMaskContent" value="3"
                                    >latent nothing</sp-radio
                                >
                            </sp-radio-group>
                        </div>

                        <div style="display: flex">
                            <sp-checkbox class="checkbox" id="chInpaintFullRes"
                                >Inpaint at Full Res</sp-checkbox
                            >
                            <sp-checkbox class="checkbox" id="chRestoreFaces"
                                >Restore Faces</sp-checkbox
                            >
                            <sp-checkbox class="checkbox" id="chHiResFixs"
                                >Hi Res Fix</sp-checkbox
                            >
                        </div>
                        <div id="HiResDiv" style="display: none">
                            <div style="display: flex">
                                <div>
                                    <sp-label>Upscaler: </sp-label>
                                    <sp-picker
                                        size="m"
                                        label="Upscaler Options"
                                    >
                                        <sp-menu
                                            id="hrModelsMenu"
                                            class="hrModelsMenuClass"
                                            slot="options"
                                        >
                                            <!-- <sp-menu-item> item </sp-menu-item> -->
                                        </sp-menu>
                                    </sp-picker>
                                </div>
                                <div>
                                    <sp-label>Hi Res Steps:</sp-label
                                    ><sp-textfield
                                        id="hrNumberOfSteps"
                                        type="number"
                                        placeholder="20"
                                        value="20"
                                        style="margin-top: 3px; width: auto"
                                    ></sp-textfield>
                                </div>
                            </div>
                            <div
                                id="hi-res-sliders-container"
                                style="display: flex"
                            >
                                <sp-slider
                                    show-value="false"
                                    id="hrWidth"
                                    min="1"
                                    max="32"
                                    value="8"
                                >
                                    <sp-label slot="label"
                                        >Hi Res Output Width:</sp-label
                                    >
                                    <sp-label
                                        class="labelNumber"
                                        slot="label"
                                        id="hWidth"
                                        >512</sp-label
                                    >
                                </sp-slider>
                                <sp-slider
                                    show-value="false"
                                    id="hrHeight"
                                    min="1"
                                    max="32"
                                    value="8"
                                >
                                    <sp-label slot="label"
                                        >Hi Res Output Height:</sp-label
                                    >
                                    <sp-label
                                        class="labelNumber"
                                        slot="label"
                                        id="hHeight"
                                        >512</sp-label
                                    >
                                </sp-slider>
                                <sp-slider
                                    show-value="false"
                                    id="hrDenoisingStrength"
                                    min="0"
                                    max="100"
                                    value="70"
                                >
                                    <sp-label slot="label">
                                        High Res Denoising Strength:</sp-label
                                    >
                                    <sp-label
                                        slot="label"
                                        id="hDenoisingStrength"
                                        >0.58</sp-label
                                    >
                                </sp-slider>
                            </div>
                        </div>
                        <sp-slider
                            show-value="false"
                            id="slInpaintPadding"
                            min="0"
                            max="64"
                            value="0"
                        >
                            <sp-label slot="label" id="lNameInpaintPdding"
                                >Inpaint Padding:</sp-label
                            >
                            <sp-label
                                class="labelNumber"
                                slot="label"
                                id="lInpaintPadding"
                                >0</sp-label
                            >
                        </sp-slider>
                        <!-- <sp-slider id="slInpainting_fill" min="0" max="3" value="1">
        <sp-label slot="label">Inpainting fill:</sp-label>
      </sp-slider> -->
                    </div>
                    <div>
                        <!-- <sp-checkbox id="chHiResFixs">Hi Res Fix</sp-checkbox> -->
                        <div style="display: flex">
                            <sp-label>Seed:</sp-label
                            ><sp-textfield
                                id="tiSeed"
                                placeholder="Seed"
                                value="-1"
                            ></sp-textfield>
                            <button
                                class="btnSquare"
                                id="btnRandomSeed"
                                style="margin-right: 3px; margin-left: 3px"
                            >
                                Random
                            </button>
                            <button class="btnSquare" id="btnLastSeed">
                                Last
                            </button>
                        </div>
                        <button type="button" id="collapsible">
                            Show Samplers
                        </button>
                        <sp-radio-group id="sampler_group" class="content">
                            <sp-label slot="label">Select Sampler:</sp-label>
                            <sp-radio class="rbSampler" checked value="Euler a"
                                >Euler a</sp-radio
                            >
                            <sp-radio class="rbSampler" value="Euler"
                                >Euler</sp-radio
                            >
                            <sp-radio class="rbSampler" value="LMS"
                                >LMS</sp-radio
                            >
                            <sp-radio class="rbSampler" value="Heun"
                                >Heun</sp-radio
                            >
                            <sp-radio class="rbSampler" value="DPM2"
                                >DPM2</sp-radio
                            >
                            <sp-radio class="rbSampler" value="DPM2 a"
                                >DPM2 a</sp-radio
                            >
                            <sp-radio class="rbSampler" value="DPM++ 2S a"
                                >DPM++ 2S a</sp-radio
                            >
                            <sp-radio class="rbSampler" value="DPM++ 2M"
                                >DPM++ 2M</sp-radio
                            >
                            <sp-radio class="rbSampler" value="DPM++ SDE"
                                >DPM++ SDE</sp-radio
                            >
                            <sp-radio class="rbSampler" value="DPM fast"
                                >DPM fast</sp-radio
                            >
                            <sp-radio class="rbSampler" value="DPM adaptive"
                                >DPM adaptive</sp-radio
                            >
                            <sp-radio class="rbSampler" value="LMS Karras"
                                >LMS Karras</sp-radio
                            >
                            <sp-radio class="rbSampler" value="DPM2 Karras"
                                >DPM2 Karras</sp-radio
                            >
                            <sp-radio class="rbSampler" value="DPM2 a Karras"
                                >DPM2 a Karras</sp-radio
                            >
                            <sp-radio
                                class="rbSampler"
                                value="DPM++ 2S a Karras"
                                >DPM++ 2S a Karras</sp-radio
                            >
                            <sp-radio class="rbSampler" value="DPM++ 2M Karras"
                                >DPM++ 2M Karras</sp-radio
                            >
                            <sp-radio class="rbSampler" value="DPM++ SDE Karras"
                                >DPM++ SDE Karras</sp-radio
                            >
                        </sp-radio-group>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
